<template>
    <div id="home">
      <div class="page-card">
        <div class="page-header">
          <div class="page-title">最新公告</div>
          <div class="more-btn" @click="toNoticeList">查看更多</div>
        </div>
        <div class="page-content">
          <div class="list">
            <div class="list-cell" v-for="(item,index) in noticeList" :key="index" v-if="index < 3" @click="toNoticeDetail(item.id)">
              <div>{{item.title}}</div>
              <div>{{item.create_time}}</div>
            </div>
            <div class="no-data-img" v-if="noticeList.length == 0">
              <img src="../../assets/image/no-data.png" alt="">
              <div class="tips">暂无数据</div>
            </div>
          </div>
        </div>
      </div>
      <div class="page-card">
        <div class="page-header">
          <div class="page-title">任务</div>
        </div>
        <div class="page-content">
          <el-table class="statistics-table"  :data="waitPushTaskNum" border size="mini">
            <el-table-column prop="wait_sale_num" label="销量等待执行">
              <div style="cursor: pointer;" slot-scope="scope" @click="jumpTaskList(3)">{{scope.row.wait_sale_num}}</div>
            </el-table-column>
            <el-table-column prop="wait_get_sale_num" label="销量已派单">
               <div style="cursor: pointer;" slot-scope="scope" @click="jumpTaskList(4)">{{scope.row.wait_get_sale_num}}</div>
            </el-table-column>
            <el-table-column prop="wait_real_sale_num" label="销量正在执行">
               <div style="cursor: pointer;" slot-scope="scope" @click="jumpTaskList(5)">{{scope.row.wait_real_sale_num}}</div>
            </el-table-column>
            <el-table-column prop="wait_check_sale_num" label="销量待审核">
               <div style="cursor: pointer; color: red;" slot-scope="scope" @click="jumpTaskList(0)">{{scope.row.wait_check_sale_num}}</div>
            </el-table-column>
            <el-table-column prop="wait_check_assess_num" label="销量评价待审核">
               <div style="cursor: pointer; color: red;" slot-scope="scope" @click="jumpTaskList(2)">{{scope.row.wait_check_assess_num}}</div>
            </el-table-column>
            <el-table-column prop="wait_flow_num" label="流量等待执行">
              <div style="cursor: pointer;" slot-scope="scope" @click="jumpTaskList(6)">{{scope.row.wait_flow_num}}</div>
            </el-table-column>
            <el-table-column prop="wait_get_flow_num" label="流量已派单">
              <div style="cursor: pointer;" slot-scope="scope" @click="jumpTaskList(7)">{{scope.row.wait_get_flow_num}}</div>
            </el-table-column>
            <el-table-column prop="wait_real_flow_num" label="流量正在执行">
              <div style="cursor: pointer;" slot-scope="scope" @click="jumpTaskList(8)">{{scope.row.wait_real_flow_num}}</div>
            </el-table-column>
             <el-table-column prop="wait_check_flow_num" label="流量待审核">
               <div style="cursor: pointer; color: red;" slot-scope="scope" @click="jumpTaskList(1)">{{scope.row.wait_check_flow_num}}</div>
             </el-table-column>
          </el-table>
        </div>
      </div>
      <el-dialog title="公告" :visible.sync="isShowDialog" width="500px">
        <div class="display-notice" v-for="(item, index) in newNoticeList" :key="index" v-if="index < 3">
          <router-link :to="{name:'noticeDetail',query:{id:item.id}}">
          <div class="display-notice-time">{{item.create_time}}</div>
          <div class="display-notice-title">{{item.title}}</div>
          </router-link>
        </div>
      </el-dialog>
        <el-dialog title="公 告" :visible.sync="dialogTab" center :append-to-body="true" :lock-scroll="false" width="30%">
            <el-collapse v-model="activeName" accordion  >
                <el-collapse-item :title="notice.create_time+' '+notice.title" v-if="index == 0" name="1" v-for="(notice,index) in noticeList" :key=index>
                  <div v-html="notice.content"></div>
                  <!--<div>{{notice.content}}</div>-->
                </el-collapse-item>
                <el-collapse-item :title="notice.create_time+' '+notice.title" v-if="index != 0"  v-for="(notice,index) in noticeList" :key=index>
                    <!--<div>{{notice.content}}</div>-->
                  <div v-html="notice.content"></div>
                </el-collapse-item>
            </el-collapse>
        </el-dialog>

    </div>

</template>
<script>
import {apiMerchantIndex} from '../../request/api'
import { mapGetters,mapActions } from 'vuex';
    export default {
        data(){
            return {
              noticeList: [],
              newNoticeList: [],
              waitPushTaskNum: [],
              isShowDialog: false,
              dialogTab:false,
              activeName: '1',
              pageRouter: {
                0: '/salesManage/waitCheckOrder',
                1: '/flowManage/waitCheckOrder',
                2: '/assessManage/addToAssessOrder',
                3: '/salesManage/waitingOrder',
                4: '/salesManage/waitReceiveOrder',
                5: '/salesManage/beingExecutedOrder',
                6: '/flowManage/waitingOrder',
                7: '/flowManage/waitReceiveOrder',
                8: '/flowManage/beingExecutedOrder'
              },
               userToken: window.localStorage.getItem('token')
            }
        },
        computed:{
          ...mapGetters(['showNoticeModalStatus']),
        },
        created () {
          var now = new Date();
          var startTime = new Date(now.toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000 * 6
          var endTime = new Date(now.toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
          this.$isClick(true);
          apiMerchantIndex({
            token: this.userToken,
            shopId: 1,
            startTime: Math.floor(startTime / 1000),
            endTime: Math.floor(endTime /1000)
          }).then(res =>{
            this.$isClick(false);
              // console.log(res);
             if (res.code == 1){

                this.noticeList = res.msg.message_list
                this.open()
                var curYearDate = new Date().getFullYear()
                var curMonthDate = new Date().getMonth() + 1
                var curDayDate = new Date().getDate()
                var dayNum = this.getMonDay() - curDayDate //这个月还剩几天
                for (let i in this.noticeList) {
                var yearDate = new Date(this.noticeList[i].create_time).getFullYear()
                var monthDate = new Date(this.noticeList[i].create_time).getMonth() + 1
                var dayDate = new Date(this.noticeList[i].create_time).getDate()
                if (curYearDate - yearDate == 0) {
                  if (curMonthDate - monthDate < 2) {
                    //这个月
                    if (curMonthDate - monthDate == 0) {
                      if (curDayDate - dayDate <= 7) {
                        this.newNoticeList.push(this.noticeList[i])
                      }
                    } else {
                      if(curMonthDate < monthDate){
                        if (dayNum + dayDate <= 7) {
                          this.newNoticeList.push(this.noticeList[i])
                        }
                      }
                    }
                  }
                }
              }
             if (this.newNoticeList.length > 0 && this.showNoticeModalStatus ==1) {
                this.isShowDialog = true
              } else {
                 this.isShowDialog = false
              }
              setTimeout(()=>{
               this.setUserConfig({
                 showNoticeModal: 2
               })
              },10000)
              this.waitPushTaskNum.push(res.msg.wait_push_task_num)
             } else {
               this.$message.error(res.msg);
             }
          }).catch(res => {
            this.$isClick(false);
              // console.log(res);
              this.$message.error(res.msg)
          });


        },
        methods:{
            ...mapActions(['setUserConfig']),
            getMonDay() {
                var d = new Date();
                //d.getMonth()+1月份索引从0开始,天数索引从1开始，第0天即代表最后一天
                var allDays = new Date(d.getFullYear(), (d.getMonth() + 1), 0).getDate();
                return allDays;
            },
            jumpTaskList(index){
                this.$router.push(this.pageRouter[index])
            },
            toNoticeList(){
                this.$router.push('./notice')
            },
            toNoticeDetail(id){
                this.$router.push("./noticeDetail?id=" + id)
            },
            open(){
                this.dialogTab = true
            },

        }
    }
</script>
<style lang="less">
  #home {
    .page-card {
      background: #FFFFFF;
      margin-bottom: 16px;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      .page-header {
        background: #ecf5ff;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content:space-between;
        .page-title {
          line-height: 20px;
          border-left: 3px solid #666666;
          padding-left: 10px;
          font-size: 16px;
          font-weight: 700;
          color: #333333;
          width: 150px;
        }
        .more-btn {
          color: #666666;
          cursor: pointer;
        }
      }
      .page-content {
        padding: 10px 20px;
        .el-table thead tr, .el-table thead tr th{
        	background: #f5f7fa!important;

        }
        .el-table td, .el-table th {
        	padding: 9px 0 !important;
          text-align: center;
        }
        .list-cell {
          display: flex;
          align-items: center;
          justify-content:space-between;
          font-size: 14px;
          color: #333333;
          border-bottom: 1px dashed #e0e0e0;
          padding: 16px;
          cursor: pointer;
        }
      }
    }
    .display-notice {
      padding: 10px 0;
      border-bottom: 1px solid #e0e0e0;
    }
    .display-notice-time {
      display: inline-block;
      width: 150px;
      color: #666;
    }
    .display-notice-title {
      display: inline-block;
      color: #666;
    }
    .no-data-img {
      text-align: center;
      margin-top: 30px;
      margin-bottom: 30px;
      .tips{
        font-size: 14px;
        margin-top: 10px;
      }
    }
  }


</style>
